<template>
    <div>
        <pagetitle></pagetitle>
        <el-card>
            <el-form :model="pageData" class="formbox" label-width="140px" :disabled="formDisabled" label-position="right">
                <div class="formboxitem">
                    <div class="title">供应商信息</div>
                    <!-- <el-form-item label="供应商名称：">
                        <el-input v-model="pageData.supplierName" class="inputs" placeholder="请输入供应商名称"></el-input>
                        <span class="formTip">*供应商名称</span>
                    </el-form-item> -->
                    <el-form-item label="客户名称：">
                        <!-- <el-input v-model="pageData.customerName" class="inputs" placeholder="请输入客户名称"></el-input> -->
                        <el-select v-model="pageData.supplierName" multiple filterable remote reserve-keyword placeholder="请输入客户名称搜索" remote-show-suffix remote-method="remoteMethod" loading="loading" class="inputs">
                            <el-option v-for="item in 10" key="item.value" label="item.label" value="item.value" />
                        </el-select>
                        <span class="formTip">*客户名称</span>
                    </el-form-item>
                    <el-form-item label="供应商电话：">
                        <el-input v-model="pageData.supplierPhone" disabled class="inputs" placeholder="请输入供应商电话"></el-input>
                        <span class="formTip">*供应商电话</span>
                    </el-form-item>
                    <el-form-item label="产业分类：">
                        <div class="selectorbtn" style="margin-right: 0">
                            <el-cascader v-model="industrialClassificationIdsValues" disabled placeholder="请选择产业分类" ref="industrialClassificationcascader" class="inputs" :props="props1" @change="handleChange"></el-cascader>
                            <!-- <div class="selectorbtn_btn" @click="addindustrialClassificationIds">添加</div> -->
                        </div>
                        <span class="formTip">*参考标准： GB/T 4754-2017 国民经济行业分类</span>
                    </el-form-item>
                    <el-form-item label="" v-if="industrialClassificationIdsTexts.length > 0">
                        <div>
                            <div v-for="(tag, index) in industrialClassificationIdsTexts" :key="index">
                                <el-tag closable @close="handleClose(index)">
                                    {{ tag }}
                                </el-tag>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="产业分类说明：">
                        <el-input v-model="pageData.illustrate" :rows="6" resize="none" disabled type="textarea" placeholder=""></el-input>
                    </el-form-item>
                </div>
                <div class="formboxitem">
                    <div class="title">GIS信息</div>
                    <el-form-item label="客户地址：">
                        <addRess class="inputs" :value="pageData.addressVal" disabled :key="pageData.addressVal" placeholder="请选择客户地址" :getAreaData="getAreaData"></addRess>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="pageData.supplierAddress" disabled class="inputs" placeholder="请输入详细地址"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="">
                        <mars3d class="mars3ds"></mars3d>
                    </el-form-item> -->
                    <mars3d class="mars3ds"></mars3d>
                </div>
                <div class="formboxitem" v-if="!pageType.type">
                    <el-button class="submitbtn" text bg @click="onSubmit">添加供应商</el-button>
                </div>
            </el-form>
            <div class="formboxitem" v-if="pageType.type">
                <el-button class="submitbtn" v-if="pageType.type == '1'" text bg @click="router.back()">返回</el-button>
                <el-button class="submitbtn" v-if="pageType.type == '2'" text bg @click="onSubmitPut">修改供应商</el-button>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
// import mars3d from "@/components/mars3d.vue";
import { ref, reactive, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import mars3d from "@/views/editorMap/index.vue";
import type { CascaderProps } from "element-plus";
import { industrialClassifications, setSupplier, getSupplierMsg, industrialClassificationsOne, putSupplier } from "@/api/team";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const route = useRoute();

// const cardType = ref(["法人", "授权管理员"]);
const pageData: any = reactive({
    supplierName: "",
    supplierPhone: "",
    supplierAddressArea: "",
    supplierAddress: "",
    teamId: "",
    industrialClassificationIds: [],
    illustrate: "",
    addressVal: "",
    customerId: "",
});
// 产业分类数据懒加载
const industrialClassificationIdsValues: any = ref([]);
const industrialClassificationIdsTexts: any = ref([]);
const props1: CascaderProps = {
    label: "industrialName",
    value: "industrialId",
    lazy: true,
    lazyLoad(node: any, resolve) {
        const { data, level } = node;
        industrialClassifications(data.industrialId ? data.industrialId : 0).then((res) => {
            res.data.forEach((v: any) => {
                industrialClassifications(v.industrialId).then((res1) => {
                    if (res1.data.length == 0) {
                        v.leaf = true;
                    } else {
                        v.leaf = false;
                    }
                });
            });
            setTimeout(() => {
                resolve(res.data);
            }, 500);
        });
    },
};
const industrialClassificationcascader: any = ref(null);
const handleChange = (value: any) => {
    let node = industrialClassificationcascader?.value.getCheckedNodes()[0];
    // console.log(value[value.length - 1]);
    pageData.industrialClassificationIds.push(value[value.length - 1]);
    pageData.illustrate = node.data.illustrate;
    setTimeout(() => {
        addindustrialClassificationIds();
    }, 300);
};
// 添加行业分类
const addindustrialClassificationIds = () => {
    // if (formDisabled.value) {
    //     return;
    // }
    let node = industrialClassificationcascader.value.getCheckedNodes()[0];
    if (node) {
        // console.log(node);
        industrialClassificationIdsTexts.value.push(node.text);
    }
};
// 移除产业分类
const handleClose = (i: number) => {
    pageData.industrialClassificationIds.splice(i, 1);
    industrialClassificationIdsTexts.value.splice(i, 1);
};
// 地址
const getAreaData = (val: any) => {
    pageData.supplierAddressArea = JSON.stringify(val);
};
const onSubmit = () => {
    pageData.teamId = store.getters.mainTeamId;
    setSupplier(pageData).then((res: any) => {
        ElMessage.success("添加成功");
        router.back();
    });
};
const onSubmitPut = () => {
    putSupplier(pageData).then((res: any) => {
        ElMessage.success("修改成功");
        router.back();
    });
};
const pageType: any = route.query;
const formDisabled = ref(false);
const getClientMsgs = () => {
    getSupplierMsg(pageType.id).then((res: any) => {
        let data = res.data;
        nextTick(() => {
            if (data.industrialClassificationList.length > 0) {
                data.industrialClassificationList.forEach((v: any) => {
                    pageData.industrialClassificationIds.push(v.industrialId);
                    industrialclassification(v.industrialId, [], []);
                });
            }
            pageData.supplierName = data.supplierName;
            pageData.supplierPhone = data.supplierPhone;
            pageData.supplierAddress = data.supplierAddress;
            pageData.teamId = data.teamId;
            pageData.addressVal = data.supplierAddressArea ? JSON.parse(data.supplierAddressArea).keyText : "";
            pageData.supplierAddressArea = data.supplierAddressArea;
            pageData.supplierId = data.supplierId;
        });
    });
};
// console.log(route);
// 页面类型
if (pageType.type == "1") {
    // 从我的团队页面进入
    formDisabled.value = true;
    route.meta.title = "查看供应商";
    getClientMsgs();
} else if (pageType.type == "2") {
    // 从加入团队页面搜索进入
    formDisabled.value = false;
    route.meta.title = "修改供应商";
    getClientMsgs();
}
// 递归查询产业分类 industrialClassificationIdsTexts
const industrialclassification = (id: number | string, idList: any | [], array: any | []) => {
    industrialClassificationsOne(id).then((res) => {
        const data: any = res.data;
        array.unshift(data.industrialName);
        idList.unshift(data.industrialId);
        if (data.parentId != 0) {
            industrialclassification(data.parentId, idList, array);
        } else {
            // pageData.value.industrialClassificationIds.push(idList[idList.length - 1]);
            industrialClassificationIdsTexts.value.push(array.join("/"));
        }
        // console.log(array);
    });
};
</script>
